<!doctype html>
<html>
{{{head}}}
<body>
{{{header}}}

<main>
<div class="body-width-115f6 page-529b3">


<section>
    <h1 class="title-5ad05">Documentation</h1>
    <ul class="toc-list-38a45">
        <li><a href="#config">Config Properties</a></li>
        <li><a href="#methods">Methods</a></li>
        <li><a href="#position_object">Position Object</a></li>
        <li><a href="#fen_string">FEN String</a></li>
        <li><a href="#errors">Errors</a></li>
    </ul>
</section>


<section>
    <h2 id="config" class="hover-linkable"><a class="hover-link docs" href="#config"></a>Config Properties</h2>
    <table class="table-bc66e" cellspacing="0">
        <thead class="center">
            <tr>
                <th>Property / Type</th>
                <th>Default</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
        </thead>
    <tbody>{{{configTableRows}}}</tbody>
    </table>
</section>


<section>
    <h2 id="methods" class="hover-linkable"><a class="hover-link docs" href="#methods"></a>Methods</h2>
    <table class="table-bc66e" cellspacing="0">
        <thead class="center">
            <tr>
                <th>Method</th>
                <th>Arguments</th>
                <th>Description</th>
                <th>Example</th>
            </tr>
        </thead>
    <tbody>{{{methodTableRows}}}</tbody>
    </table>
</section>


<section>
    <h2 id="position_object" class="hover-linkable"><a class="hover-link docs" href="#position_object"></a>Position Object</h2>
    <p>You can use a JavaScript object to represent a board position.</p>
    <p>The object property names must be algebraic squares (ie: e4, b2, c6, etc) and the values must be a valid piece codes (ie: wP, bK, wQ, etc).</p>
    <p>See an example of using an object to represent a position <a href="examples.html#1003">here</a>.</p>
    <p>Chessboard.js exposes the <a href="examples.html#4000"><code class="js plain">Chessboard.objToFen</code></a> method to help convert between Position Objects and <a href="docs.html#fen_string">FEN Strings</a>.</p>
</section>


<section>
    <h2 id="fen_string" class="hover-linkable"><a class="hover-link docs" href="#fen_string"></a>FEN String</h2>
    <p>You can use <a href="http://en.wikipedia.org/wiki/Forsyth%E2%80%93Edwards_Notation">Forsyth-Edwards Notation (FEN)</a> to represent a board position.</p>
    <p>Note that FEN notation captures more information than chessboard.js requires, like who's move it is and whether or not castling is allowed. This information will be ignored; only the position information is used.</p>
    <p>See an example of using a FEN String to represent a position <a href="examples.html#1002">here</a> and <a href="examples.html#1004">here</a>.</p>
    <p>Chessboard.js exposes the <code class="js plain">Chessboard.fenToObj</code> method to help convert a FEN String to a <a href="docs.html#position_object">Position Object</a>.</p>
</section>


<section>
    <h2 id="errors" class="hover-linkable"><a class="hover-link docs" href="#errors"></a>Errors</h2>
    <p>Chessboard.js has an error system designed to inform you when you use the API incorrectly.</p>
    <p>Every alert has a unique code associated with it and you can control how the errors are presented with the <a href="docs.html#config:showErrors">showErrors</a> config option.</p>
    <table class="table-bc66e" cellspacing="0">
        <thead class="center">
            <tr>
                <th style="width: 75px">Error ID</th>
                <th style="width: 45%">Error Text</th>
                <th>More Information</th>
            </tr>
        </thead>
        <tbody>{{{errorRows}}}</tbody>
    </table>
</section>


</div>
</main>

{{{footer}}}

<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/jquery.color-2.1.2.min.js"></script>
<script>
;(function () {
  function flashRow (id) {
    var $el = $(document.getElementById(id))
    var bgColor = $el.css('background-color')
    $el.css('background-color', '#ffff99')
      .animate({backgroundColor: bgColor}, 2000)
  }

  function isTableRow (id) {
    return id.search(/\:/) !== -1
  }

  function clickAnchor (evt) {
    var id = $(this).attr('href').replace(/^.+#/, '')
    if (isTableRow(id)) {
      flashRow(id)
    }
  }

  function init () {
    $('body').on('click', 'a', clickAnchor)

    if (window.location.hash.search('%3a') !== -1) {
      window.location.hash = window.location.hash.replace('%3a', ':')
    }

    // give it just a smidge more time to load
    setTimeout(function () {
      if (isTableRow(window.location.hash)) {
        flashRow(window.location.hash.replace('#', ''))
      }
    }, 150)
  }

  $(document).ready(init)
})()
</script>
</body>
</html>
